<template>
    <!-- <button @click="show = !show">开关{{show}}</button>
    <Dialog v-model="show"></Dialog> -->
    <div class="styles">
        <h3>我是父组件</h3>
        这个是开关 {{show}}
        <el-button type="danger" @click="show = !show">开关</el-button>
        <hr>
        <!-- 我是输入框:{{searchDate.keyword}} -->
        我是输入框:{{searchDate}}
        <br>
        这个是v-model 在input上的邦迪 {{searinpuchDate.keyword}}
        <br>
        这里是采用computed方式的双向绑定: {{searinpuchDate3.keyword}}
        <Dialog 
        v-model="show" 
        v-model:searchDate.isBt="searchDate" 
        v-model:searinpuchDate = "searinpuchDate"
        v-model:searinpuchDate3 = "searinpuchDate3"></Dialog>
        <br>
        <!-- .isBt是v-model自定义修饰符 -->
        <!-- <Dialog v-model="show" v-model:searchs.isBt="searchs"></Dialog> -->
    </div>
</template>
   
  <script setup lang='ts'>
  import Dialog from "./InputModel.vue";
  import {ref} from 'vue'
  const show = ref(false)
  const searinpuchDate = ref({
    keyword: '花满楼'
  })
  const searinpuchDate3 = ref({
    keyword: '茶香诗意',
    Options: [
    { label: "视频", value: "video" },
    { label: "文章", value: "article" },
    { label: "用户", value: "user" },
  ],
  })
  const searchDate = ref('小满')
  </script>
   
<style>
  .styles{
    width:800px;
    height:800px;
    margin: 0 auto;
  }
  h3{
     margin:10px;
    }
  </style>